<!doctype html>

<head>
    <title>SymboLayer3D example</title>
    <script include="threebox" src="./static/libs/include-mapboxgl-local.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>
        //mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
        mapboxgl.accessToken =
            'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [-122.4131, 37.7743],
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            hash: true,
            maxZoom: 24
        });

        map.on("load", function () {
            // Initialize threebox
            window.threebox = new Threebox(map);
            threebox.setupDefaultLights();

            var source = {
                type: "FeatureCollection",
                features: [{
                        type: "Feature",
                        properties: {
                            model: "orientation_0_0"
                        },
                        geometry: {
                            type: "Point",
                            coordinates: [0, 0]
                        }
                    },
                    {
                        type: "Feature",
                        properties: {
                            model: "orientation_-30_-30"
                        },
                        geometry: {
                            type: "Point",
                            coordinates: [-30, -30]
                        }
                    },
                    {
                        type: "Feature",
                        properties: {
                            model: "orientation_-30_0"
                        },
                        geometry: {
                            type: "Point",
                            coordinates: [-30, 0]
                        }
                    },
                    {
                        type: "Feature",
                        properties: {
                            model: "orientation_0_30"
                        },
                        geometry: {
                            type: "Point",
                            coordinates: [0, 30]
                        }
                    },
                    {
                        type: "Feature",
                        properties: {
                            model: "orientation_30_30"
                        },
                        geometry: {
                            type: "Point",
                            coordinates: [30, 30]
                        }
                    },

                ]
            };

            var symbols = threebox.addSymbolLayer({
                id: "scale",
                source: source, // You can also specify a URL or relative path such as "data/points.geojson",
                modelName: {
                    property: 'model'
                }, // will look for an .obj and .mtl file with this name
                modelDirectory: "../../static/data/model/threebox/", // in this directory
                rotation: {
                    generator: feature => (new THREE.Euler(0, 0, 0, "ZXY"))
                },
                scale: [100000, 100000, 100000],
                scaleWithMapProjection: true
            });

            console.log(symbols);
        });
    </script>
</body>